<template>
  <canvas ref="canvas" v-bind:width="width" v-bind:height="height"></canvas>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import { fabric } from "fabric";

export default {
  name: 'Fabric',
  data() {
    let width = window.innerWidth;
    let height = window.innerHeight;
    if (width >= height) {
      width = (height * 381) / 453;
    } else {
      height = (width * 453) / 381;
    }
    return {
        width: width,
        height: height
    }
  },
  mounted() {
    let canvas = new fabric.Canvas(this.$el);
    let width = this.$data.width;
    let height = this.$data.height;
    let frontImage;

    fabric.Image.fromURL('https://ip.webmasterapi.com/api/imageproxy/https://lumise-demo.myshopify.com/apps/design-editor/app/core/raws/products/basic_tshirt_front.png', function(image) {
      //image.filters = [swapColorFilter];
      image.scaleToWidth(width);
      image.scaleToHeight(height);
      //image.applyFilters();
      image.lockMovementX = true;
      image.lockMovementY = true;
      image.hasControls = false;
      image.hasBorders = false;
      image.evented = false;
      image.centeredRotation = false;
      image.centeredScaling = false;
      image.lockScalingX = true;
      image.lockScalingY = true;
      image.selectable = false;
      frontImage = image;
      canvas.setOverlayImage(image);
    }, { crossOrigin: 'anonymous' });

    fabric.Image.fromURL('https://ip.webmasterapi.com/api/imageproxy/http://dimg.pxnlive.com/images/b1.webp', function(image) {
      image.scaleToWidth(width);
      image.applyFilters();
      image.onDeselect = function() {
        this.moveTo(1);
        // frontImage.moveTo(2);
        canvas.bringToFront(frontImage);
      }
      canvas.add(image);
    }, { crossOrigin: 'anonymous' });


    fabric.Image.fromURL('https://ip.webmasterapi.com/api/imageproxy/http://dimg.pxnlive.com/images/b4.webp', function(image) {
      image.scaleToWidth(width);
      image.applyFilters();
      image.cornerStrokeColor = "#ff0000";
      image.cornerStyle = 'circle';
      image.onDeselect = function() {
        this.moveTo(1);
        // frontImage.moveTo(2);
        canvas.bringToFront(frontImage);
      }
      canvas.add(image);
    }, { crossOrigin: 'anonymous' });

    this.$data.fabric = {"canvas": canvas, "front": frontImage};
  }
}
</script>